<!DOCTYPE html>
<div class="container">
  <!-- tabs 标签页  组织架构和岗位管理  -->
  <nz-tabset>
    <nz-tab nzTitle="组织架构">
      <div class="contentBox" id="organizeList">
        <div class="listBox">
          <div class="opration">
            <h3>公司组织</h3>
            <div class="right">
              <button nz-button [nzType]="'primary'" (click)='addOrganize()'><span>新增</span></button>
            </div>
          </div>

          <!-- 树形数据的展示 -->
          <nz-table #expandTable [nzData]="listOfMapData" nzTableLayout="fixed" [nzShowPagination]="false">
            <thead>
              <tr>
                <th>组织名称</th>
                <th>在职人数</th>
                <th>负责人</th>
              </tr>
            </thead>
            <tbody>
              <ng-container *ngFor="let data of expandTable.data">
                <ng-container *ngFor="let item of mapOfExpandedData[data.NodeId]">
                  <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
                    <td
                      [nzIndentSize]="item.level! * 20"
                      [nzShowExpand]="!!item.children"
                      [(nzExpand)]="item.expand"
                      (nzExpandChange)="collapse(mapOfExpandedData[data.NodeId], item, $event)"
                    >
                      {{ item.Name }}
                    </td>
                    <td>{{ item.OnJobNum }}</td>
                    <td>{{ item.Leader }}</td>
                  </tr>
                </ng-container>
              </ng-container>
            </tbody>
          </nz-table>
        </div>
      </div>
    </nz-tab>

    <nz-tab nzTitle="岗位管理">
      <div class="contentBox jobManage">
        <ul class="topNumShow">
          <li>
            <p>岗位概况</p>
          </li>
          <li>
            <span>{{ allJobNum }}</span>
            <p>岗位总数</p>
          </li>
          <li>
            <span>{{ onJobNum }}</span>
            <p>在职人数</p>
          </li>
          <li>
            <span>{{ outJobNum }}</span>
            <p>离职人数</p>
          </li>
        </ul>
        <div class="listBox">
          <div class="opration">
            <h3>公司组织</h3>
            <div class="right">
              <!-- 新增组织弹出框 响应式表单  -->
              <button nz-button [nzType]="'primary'" (click)='addJob()'><span>新增</span></button>
            </div>
          </div>
        </div>
        
        <nz-table [nzData]="jobOfData" >
          <thead>
            <tr>
              <th>序号</th>
              <th>岗位名称</th>
              <th>所属部门</th>
              <th>在职人数</th>
              <th>已离职人数</th>
              <th>岗位编码</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody cdkDropList (cdkDropListDropped)="drop($event)">
            <tr *ngFor="let data of jobOfData;let key=index" cdkDrag>
              <td>{{ key+1 }}</td>
              <td>{{ data.Job.JobName }}</td>
              <td>{{ data.DeptName }}</td>
              <td>{{ data.OnJobNum }}</td>
              <td>{{ data.OffJobNum }}</td>
              <td>{{ data.Job.JobNum }}</td>
              <td>
                <button *ngIf="data.OnJobNum == '0' && data.OffJobNum == '0'" nz-button nzType="dashed" (click)="showDeleteConfirm(data.Job.Id,data.Job.JobName,data.DeptName)">删除</button>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </nz-tab>
  </nz-tabset>
</div>
